import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import React from "react";
import { EventSourceInput } from "@fullcalendar/core";
import moment from "moment";

type Props = {
  events: EventSourceInput;
  monthOffset: number;
};

export const FullMedCalendar = ({ events, monthOffset }: Props) => {
  return (
    <>
      <FullCalendar
        plugins={[timeGridPlugin, dayGridPlugin]}
        initialView="dayGridMonth"
        events={events}
        aspectRatio={2.6}
        headerToolbar={{
          right: "timeGridWeek,dayGridMonth",
        }}
        buttonText={{
            month: "месяц", // custom button text for the month view
            week: "неделя", // custom button text for the month view
          }}
        initialDate={moment().add(monthOffset, "month").toDate()}
        locale="ru"
        displayEventEnd
        eventDisplay="block"
        eventBorderColor="#ffffffff"
        firstDay={1}
        validRange={{
          start: moment().add(monthOffset, "month").startOf("month").toDate(),
          end: moment().add(monthOffset, "month").endOf("month").toDate(),
        }}
      />
    </>
  );
};
